<template>
  <div class="material">
    <img
      :src="materialData.brand.logo"
      alt=""
      class="material-img"
    >
    <!-- <div class="material-img" /> -->
    <div class="material-content">
      <div class="material-brand">
        <div class="material-brand-title">
          品牌
        </div>
        <div class="material-brand-text">
          {{ materialData.brand.brand_name||'' }}
        </div>
      </div>
      <div class="material-country">
        <div class="material-country-title">
          产地
        </div>
        <div class="material-country-text">
          {{ materialData.brand.country||'' }}
        </div>
      </div>
      <div class="material-manufacturer">
        <div class="material-manufacturer-title">
          生产厂商
        </div>
        <div class="material-manufacturer-text">
          {{ materialData.brand.company||'' }}
        </div>
      </div>
      <div
        v-if="materialData.auth.length"
        class="material-authentication"
      >
        <div class="material-authentication-title">
          认证
        </div>
        <div class="material-authentication-item-wrap">
          <div
            v-for="item in materialData.auth"
            :key="item"
          >
            <div
              class="authentication-icon"
              :style="{ backgroundImage:'url('+authenticationImage[item]+')',backgroundPosition:'center',backgroundRepeat:'no-repeat'}"
            />
          </div>
        </div>
      </div>
      <div v-for="(item,index) in materialData.params" :key="index" class="material-params-item">
        <div v-if="item.name!==null" class="material-params-item-title">
          {{ item.name }}
        </div>
        <div v-if="item.name!==null" class="material-params-item-text">
          {{ item.value }}
        </div>
      </div>
      <div v-if="materialData.feature" class="material-characteristic">
        <div class="material-characteristic-title">
          仪器特色
        </div>
        <div class="material-characteristic-text">
          {{ materialData.feature||'' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import authenticationImg from '@/utils/authenticationImg.js'
export default {
  components: {

  },
  props: {
    materialData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      authenticationImage: {}
    }
  },
  computed: {

  },
  created() {
    this.authenticationImage = authenticationImg
  },
  mounted() {

  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
.material-img {
  width: 348px;
  height: 162px;
  background: rgba(246, 246, 246, 1);
  border-radius: 4px;
  border: 1px solid #ccc;
}
.material-content {
  margin-top: 22px;
  .material-brand {
    display: flex;
    .material-brand-title {
      width: 64px;
      height: 22px;
      margin-left: 15px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .material-brand-text {
      margin-left: 44px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .material-country {
    display: flex;
    .material-country-title {
      width: 64px;
      height: 22px;
      margin-left: 15px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .material-country-text {
      margin-left: 44px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .material-manufacturer {
    display: flex;
    .material-manufacturer-title {
      width: 64px;
      height: 22px;
      margin-left: 15px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .material-manufacturer-text {
      width: 243px;
      margin-left: 44px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
   .material-authentication {
    display: flex;
    .material-authentication-title {
      width: 64px;
      height: 22px;
      margin-left: 15px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .authentication-icon {
      width: 47px;
      height: 20px;
      background-size: 100% 100%;
      margin-right: 6px;
      margin-bottom: 2px;
    }
    .material-authentication-item-wrap {
      width: 243px;
      display: flex;
      flex-wrap: wrap;
      margin-left: 44px;
      margin-top: 17px;
    }
  }
  .material-params-item{
    display: flex;
    .material-params-item-title {
      width: 64px;
      height: 22px;
      margin-left: 15px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .material-params-item-text {
      margin-left: 44px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .material-characteristic{
    display: flex;
    .material-characteristic-title{
       width: 64px;
      height: 22px;
      margin-left: 15px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .material-characteristic-text{
      width: 243px;
      margin-left: 44px;
      margin-top: 17px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>
